<template>
  <div class="menu-container">
    <div class="search">
      <el-form style="text-align: left;margin-left: 10px;">
        <el-input v-model="key" size="small" placeholder="输入查询的菜单名称" style="" auto-complete="off" style="width: 200px"></el-input>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">搜索</el-button>
        <el-button size="small" native-type="reset" @click="searchReset" icon="el-icon-refresh">重置</el-button>
      </el-form>
      <div :span="1">
        <el-button type="warning" size="small" @click="isAddDialog = true" icon="el-icon-plus">添加</el-button>
      </div>
    </div>
    <el-table
        class="table-container"
        :data="tableData"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="菜单名称"></el-table-column>
      <el-table-column prop="permission" label="权限标识"></el-table-column>
      <el-table-column prop="type" label="菜单类型" width="120px">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.type===0) ? 'success' : 'warning'">
            {{ (scope.row.type===0) ? '菜单' : '按钮' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | unixTimeToDate('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <div style="text-align: center;display: flex;justify-content: space-around" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" plain size="small" :underline="false" @click="openEditorMenu(scope.row.id)">编辑</el-button>
          <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" icon="el-icon-warning-outline" iconColor="red" title="是否确定删除？"
                         @onConfirm="deleteMenu(scope.row.id)" @onCancel="">
            <el-button type="danger" plain size="small" icon="el-icon-delete" :underline="false" slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
      </el-table-column>
    </el-table>

    <!-- 创建新增菜单对话框 -->
    <el-dialog
      title="新增菜单"
      :visible.sync="isAddDialog"
      width="40%"
      top="7vh"
      @close="closeDialogReset">
      <el-form
        ref="menuForm"
        :rules="menuRules"
        :model="menuForm"
        label-width="90px">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="menuForm.type" size="small" fill="#909399" style="width:100%;text-align: left;">
            <el-radio-button :label="0">菜单</el-radio-button>
            <el-radio-button :label="1">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授权标识" prop="permission">
          <el-input v-model="menuForm.permission" placeholder="请输入授权标识"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon" v-if="menuForm.type===0">
          <pop-select :placeholder="'请输入菜单图标'" :value="menuForm.icon" :width="'300px'">
            <el-scrollbar slot="main" wrap-style="height:200px;">
              <div class="icons-container">
                <span v-for="icon in icons" class="icon-box" :class="icon" @click="menuForm.icon=icon"></span>
              </div>
            </el-scrollbar>
          </pop-select>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentName">
          <pop-select :placeholder="'请输入上级菜单'" :value="menuForm.parentName">
            <el-scrollbar slot="main" wrap-style="height:150px;">
              <el-tree
                :data="selectMenuOptions"
                :props="defaultProps"
                ref="nodeTree"
                accordion
                highlight-current
                @current-change="handleCurrentChange">
              </el-tree>
            </el-scrollbar>
          </pop-select>
        </el-form-item>
        <el-form-item label="菜单组件" prop="component" v-if="menuForm.type===0">
          <el-input v-model="menuForm.component" placeholder="请输入菜单组件"></el-input>
        </el-form-item>
        <el-form-item label="菜单路由" prop="component" v-if="menuForm.type===0">
          <el-input v-model="menuForm.path" placeholder="请输入菜单路由"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddMenu">确定</el-button>
      </div>
    </el-dialog>

    <!-- 创建编辑菜单对话框 -->
    <el-dialog
      title="编辑菜单"
      :visible.sync="isEditorDialog"
      width="40%"
      top="7vh"
      @close="closeDialogReset">
      <el-form
        ref="menuForm"
        :rules="menuRules"
        :model="menuForm"
        label-width="90px">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="menuForm.type" size="small" fill="#909399" style="width:100%;text-align: left;">
            <el-radio-button :label="0">菜单</el-radio-button>
            <el-radio-button :label="1">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授权标识" prop="permission">
          <el-input v-model="menuForm.permission" placeholder="请输入授权标识"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon" v-if="menuForm.type===0">
          <pop-select :placeholder="'请输入菜单图标'" :value="menuForm.icon" :width="'300px'">
            <el-scrollbar slot="main" wrap-style="height:200px;">
              <div class="icons-container">
                <span v-for="icon in icons" class="icon-box" :class="icon" @click="menuForm.icon=icon"></span>
              </div>
            </el-scrollbar>
          </pop-select>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentName">
          <pop-select :placeholder="'请输入上级菜单'" :value="menuForm.parentName">
            <el-scrollbar slot="main" wrap-style="height:150px;">
              <el-tree
                :data="selectMenuOptions"
                :props="defaultProps"
                ref="nodeTree"
                accordion
                highlight-current
                @current-change="handleCurrentChange">
              </el-tree>
            </el-scrollbar>
          </pop-select>
        </el-form-item>
        <el-form-item label="菜单组件" prop="component" v-if="menuForm.type===0">
          <el-input v-model="menuForm.component" placeholder="请输入菜单组件"></el-input>
        </el-form-item>
        <el-form-item label="菜单路由" prop="component" v-if="menuForm.type===0">
          <el-input v-model="menuForm.path" placeholder="请输入菜单路由"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateEditorMenu">更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import PopSelect from '@/components/popselect'
  import { icons } from '@/components/popselect/el_icons'
  import {addMenu, deleteMenuById, getMenuById, getMenuList, getSelectNodeMenu, updateMenu} from "../../api/menu";
    export default {
      name: "sysMenu",
      components: {PopSelect},
      data() {
        return {
          key: '',
          loading: true,
          tableData: [],
          isAddDialog: false,
          isEditorDialog: false,
          menuRules: {
            permission: [{required: true, message: '请输入授权标识', trigger: 'blur'}],
            name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
            path: [{required: true, message: '请输入菜单路由', trigger: 'blur'}],
            component: [{required: true, message: '请输入菜单组件', trigger: 'blur'}],
            type: [{required: true, message: '请输入菜单类型', trigger: 'blur'}],
            icon: [{required: true, message: '请输入菜单图标', trigger: 'blur'}]
          },
          menuForm: {
            id: '',
            permission: '',
            name: '',
            path: '',
            component: '',
            parentid: 0,
            parentName: '',
            type: 0,
            icon: ''
          },
          selectMenuOptions: [],
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          icons: icons
        }
      },
      methods: {
        //条件查询
        search() {
          this.getMenuList();
        },
        //重置条件查询
        searchReset() {
          this.key = ''
        },
        //添加菜单
        submitAddMenu() {
          console.log(this.menuForm)
          this.$refs['menuForm'].validate(valid =>{
            if(valid) {
              addMenu(this.menuForm).then(res=>{
                if(res.data.code === 200) {
                  this.$message.success('添加成功')
                  this.isAddDialog = false
                  this.getMenuList()
                }
              })
            }
          })
        },
        //更新菜单
        updateEditorMenu() {
          this.$refs['menuForm'].validate(valid =>{
            if(valid) {
              updateMenu(this.menuForm).then(res=>{
                if(res.data.code === 200) {
                  this.$message.success('更新成功')
                  this.isEditorDialog = false
                  this.getMenuList()
                }
              })
            }
          })
        },
        //编辑菜单初始化
        openEditorMenu(id) {
          getMenuById(id).then(res=>{
            if(res.data.code === 200) {
              this.menuForm = res.data.data.menu;
              this.isEditorDialog = true;

            }
          })
        },
        //删除菜单
        deleteMenu(id) {
          deleteMenuById(id).then(res=>{
            if(res.data.code === 200) {
              this.$message.success('删除成功')
              this.getMenuList()
            }
          })
        },
        //获取菜单列表
        getMenuList() {
          getMenuList(this.key).then(res=>{
            if(res.data.code === 200) {
              this.tableData = res.data.data.menus_list;
            }
          })
        },
        //关闭对话框重置数据
        closeDialogReset() {
          this.$refs['menuForm'].resetFields()
          this.menuForm = {
              id: '',
              permission: '',
              name: '',
              path: '',
              component: '',
              parentid: 0,
              parentName: '',
              type: 0,
              icon: ''
          }
        },
        //监听当节点被选中
        handleCurrentChange(data, node) {
          this.menuForm.parentid = data.value;
          this.menuForm.parentName = data.label;
        },
        //初始化上级菜单选择器
        initMenuNodeSelect() {
          getSelectNodeMenu().then(res=>{
            this.selectMenuOptions = res.data.data.select_menus;
          })
        }
      },
      mounted() {
        this.getMenuList();
        this.initMenuNodeSelect();
      }
    }
</script>

<style lang="scss" scoped>
  .menu-container {
    min-height: 600px;
    background-color: #fff;
    padding: 10px;
    .search {
      display: flex;
      justify-content: space-between;
    }
    .table-container {
      width: 99%;
      margin: 10px;
    }
  }

  .icons-container {
    display: flex;
    width: 240px;
    flex-wrap: wrap;
    .icon-box {
      padding: 5px;
      cursor: pointer;
      font-size: 20px;
    }
    .icon-box:hover {
      padding: 4px;
      border-radius: 3px;
      border: 1px #ccc solid;
    }
  }
</style>
